<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{$queueset.screen_title}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__STATIC__/admin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/admin/css/login.css" media="all">
	<style>
	*{box-sizing: border-box}
	.numbox{width:200px;height:80px;line-height:80px;border:2px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.05);border-radius:10px;color:#fff;font-size:36px;text-align:center;font-weight:bold;margin:20px}
	 .category_list{width:100%;display: flex;flex-wrap: wrap; margin-top: 40px}
	 .category_list	.item{width: 45%;height: 270px;background: #1F6ADD;border: 4px solid #ffffff;border-radius: 5px;margin: 0 0 40px 2.5%}
	.category_list .item:nth-child(2n){margin: 0 0 40px 5%}
	.category_list .item .title{text-align: center;font-size: 20px;padding: 10px 0;color: #ffffff;font-weight: bold }
	.category_list .item .item-list{margin-left:8%;width: 90%;flex-wrap: wrap;display: flex;min-height: 140px}
	.category_list .item .item-list .list{margin: 20px 3% 10px 3%;border: 4px solid #ffffff;min-width: 25%;height: 40px;line-height: 36px;text-align: center;color: #ffffff;font-size: 30px}
	.category_list .item .desc{font-size: 22px;padding: 10px 20px;color: #ffffff;font-weight: bold ;margin-top: 10px}
	</style>
</head>
<body>
  <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="{if $queueset['screen_pic']}background:url('{$queueset.screen_pic}');background-size:100% 100%;{else}background:linear-gradient(#1F75E5,#0A43B6);{/if}" >
		<div style="position:absolute;top:20px;left:30px;color:#fff;font-size:32px;font-weight:bold">{$queueset.screen_title}</div>
		<div style="position:absolute;top:20px;right:40px;color:#fff;display:flex;align-items:center;font-size:20px">
			<div style="text-align:right">
				<div id="show_week">{php}$week = date('w');if($week==0) $weektext='星期天';if($week==1) $weektext='星期一';if($week==2) $weektext='星期二';if($week==3) $weektext='星期三';if($week==4) $weektext='星期四';if($week==5) $weektext='星期五';if($week==6) $weektext='星期六';{/php}{$weektext}</div>
				<div id="show_date" style="font-size:16px">{:date('Y.m.d')}</div>
			</div>
			<div id="show_time" style="font-size:50px;margin-left:10px">{:date('H:i:s')}</div>
		</div>

		<div style=";color:#fff;width:100%;text-align:center;position: relative">
			<div style="font-size:60px;font-weight:bold;text-shadow: 0px 8px 7.68px rgba(0, 55, 138, 0.5);" id="lastno">{$lastqueue.queue_no}</div>
			<div style="font-size:24px;color:rgba(255,255,255,0.8)" id="call_text">{$lastqueue.call_text}</div>
			 
		</div>
	 
	  
	    {if $nomal_list}
		<div style="width:100%;padding:40px 60px 0 100px;display:flex;flex-wrap:wrap;margin:0 auto" id="queue_list">
			{foreach $lastqueuelist as $queue}
			<div class="numbox">{$queue.queue_no}</div>
			{/foreach}
		</div>
	    {/if}
	    
		{if $queueset['screen_desc']}
    <div class="layui-trans layadmin-user-login-footer" style="color:rgba(255,255,255,0.8);height:48px;line-height:48px;padding:0;font-size:22px;margin-bottom:20px">
			{$queueset.screen_desc}
    </div>
		{/if}
  </div>

	<div style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:bold" onclick="$(this).hide();fullScreen()">点击开始</div>
 
	{include file="public/js"/}
  <script>
	var nowtime = parseInt('{:time()}');
	$(function(){
		setInterval(function(){
			nowtime++;
			$('#show_date').html(date('Y.m.d',nowtime));
			$('#show_time').html(date('H:i:s',nowtime));
			var nowweek = date('w',nowtime);
			var weektext = '';
			if(nowweek==0) weektext='星期天';
			if(nowweek==1) weektext='星期一';
			if(nowweek==2) weektext='星期二';
			if(nowweek==3) weektext='星期三';
			if(nowweek==4) weektext='星期四';
			if(nowweek==5) weektext='星期五';
			if(nowweek==6) weektext='星期六';
			$('#show_week').html(weektext);
		},1000)
	})
	
	function receiveMessage(data){
		console.log(data)
		if(data.type == 'restaurant_queue_callno' || data.type == 'restaurant_queue_add' || data.type == 'restaurant_queue_cancel'){
			var message = data.data;
			$.post("{:url('getqueuelist')}",{aid:'{$aid}',bid:'{$bid}'},function(res){
				if(res.status==1){
					var lastqueue = res.lastqueue;
					$('#lastno').html(lastqueue.queue_no);
					$('#call_text').html(lastqueue.call_text);
					var lastqueuelist = res.lastqueuelist
					var html = '';
					
					for(var i in lastqueuelist){
						html += '<div class="numbox">'+(lastqueuelist[i].queue_no ? lastqueuelist[i].queue_no : '')+'</div>';
					}
					console.log(html)
					$('#queue_list').html(html);
					
					var audio = document.createElement("audio");
					audio.src = res.lastqueue.call_voice_url;
					audio.play();
				}
			});
		}
	}
	var websocket =null;
	function websocketsend(senddata){
		if(websocket==null || websocket.readyState!=1){
			//console.log(1)
			 websocket = new WebSocket('wss://{$_SERVER['HTTP_HOST']}/wss');
			websocket.onopen = function(evt) {
				websocket.send(JSON.stringify({ type:'restaurant_queue',token:'{$token}',data:{ aid:{$aid},bid:{$bid} } }))
				if(senddata){
					websocket.send(JSON.stringify(senddata))
				}
			};
			websocket.onclose = function(evt) {
					console.log('onclose');
					console.log(evt);
			};
			websocket.onmessage = function(res) {
				console.log(res.data)
				try{
					var data = JSON.parse(res.data);
				
					receiveMessage(data);
					/*
					if(data.type == 'restaurant_queue_callno'){
						receiveMessage(data.data);
					}else if(data.type == 'response'){
						if(data.data.status==0){
							dialog(data.data.msg);
						}
					}*/
				}catch(e){}
			};
			websocket.onerror = function(evt) {
					console.log('onerror');
					console.log(evt);
			};
		}else{
			if(senddata)
			websocket.send(JSON.stringify(senddata))
		}
	}
	websocketsend('');
	var interval1 = setInterval(function(){
		websocketsend({type:'connect'});
	},25000)


	
	//全屏
	function fullScreen(){
		var isfullScreen = isFullscreen()
		if(!isfullScreen){
			var el = document.documentElement;
			var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

			//typeof rfs != "undefined" && rfs
			if (rfs) {
					rfs.call(el);
			}
			else if (typeof window.ActiveXObject !== "undefined") {
					//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
							wscript.SendKeys("{F11}");
					}
			}
		}else{
			exitScreen();
		}
	}
	
	//退出全屏
	function exitScreen(){
			var el = document;
			var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;

			//typeof cfs != "undefined" && cfs
			if (cfs) {
					cfs.call(el);
			}
			else if (typeof window.ActiveXObject !== "undefined") {
					//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
							wscript.SendKeys("{F11}");
					}
			}
	}
	function isFullscreen(){
			return document.fullscreenElement    ||
						 document.msFullscreenElement  ||
						 document.mozFullScreenElement ||
						 document.webkitFullscreenElement || false;
	}
  </script>
</body>
</html>